import { IViewComponentProps } from "@/Factory";
import { useOpenEditor } from "@/hooks/Workspaces/useOpenEditor";
import { ISessionItem, sessions_mgr } from "@/mgr";
import { Paths } from "@/paths";
import { LoadingOutlined, ReloadOutlined } from "@ant-design/icons";
import { Button, Flex, Input, Select, Typography } from "antd";
import classNames from "classnames";
import { useCallback, useState } from "react";
import { ContactType } from "../../constants/ContactType";
import { FlexHeader, FlexRoot, ListEmpty } from "../_BaseView/FlexRoot";
import { List } from "../_BaseView/List";
import { SessionItem } from "./SessionItem";
import styles from "./styles.module.scss";
import { useWXSessions } from "./useWXSessions";

export default function SessionsView(props: IViewComponentProps) {
  const { actived = true } = props;
  const [contact_types, set_contact_types] = useState<ContactType.Value[]>([ContactType.Value.联系人, ContactType.Value.群聊]);
  const [keyword, set_keyword] = useState<string>();
  const { sessions, loading } = useWXSessions({ contact_types, keyword });
  const open_editor = useOpenEditor();

  const render_item = useCallback((item: ISessionItem) => {
    const on_click = (e: React.MouseEvent) => {
      const { contact_type_name, nickName, userName } = item;
      const title = `[${contact_type_name}]${nickName || userName}`
      const path = Paths.All.LocalChat
      const uid = `l_${item.account}_${item.userName}`
      open_editor({ uid: uid, title, kind: path, data: { ...item } })
      e.stopPropagation();
      e.preventDefault();
    }
    return (
      <SessionItem
        item={item}
        key={item.userName}
        onClick={on_click} />
    )
  }, [])

  return (
    <FlexRoot vertical className={classNames(styles.sesson_view, { [styles.inactived]: !actived })}>
      <FlexHeader>
        <Flex align='center' flex={1} gap={5}>
          <Select
            value={contact_types} onChange={set_contact_types}
            mode='multiple'
            options={ContactType.options}
            variant='underlined'
            size='small'
            allowClear
            placeholder='联系类型'
            suffixIcon={null}
            maxTagCount={1}
            style={{ minWidth: 100 }} />
          <Input
            style={{ width: 150 }}
            defaultValue={keyword}
            variant='underlined'
            size='small'
            onBlur={e => set_keyword(e.target.value ?? '')}
            onPressEnter={e => set_keyword((e.target as HTMLInputElement).value ?? '')}
            onKeyDown={e => e.key.toLowerCase() === 'escape' && (e.target as HTMLElement).blur()}
            placeholder="搜索..."
            allowClear />
        </Flex>
        <Flex>

          <Typography.Text type='secondary'>
            {`数量 ${sessions.length}`}
          </Typography.Text>
        </Flex>
        <Button type='text' size='small' disabled={loading} onClick={() => sessions_mgr().load()}>
          {loading ? <LoadingOutlined /> : <ReloadOutlined />}
        </Button>
      </FlexHeader>

      <List
        virtual={sessions.length > 100}
        data={sessions}
        itemHeight={69}
        itemKey="userName"
        others={<ListEmpty show={!sessions.length} description='暂无会话' />}>
        {render_item}
      </List>
    </FlexRoot>
  )
}
